<template>
  <div>
      <h4>第九题</h4>
    <div class="colorBox" :style="{backgroundColor:rgb}" ></div>
    <div>
      R:<input type="range"  max="250" v-model="r" />
      G:<input type="range"  max="250" v-model="g" />
      B:<input type="range"  max="250" v-model="b" />
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      r: 0,
      g: 0,
      b: 0
    }
  },
  computed: {
    rgb () {
      return `rgba(${this.r},${this.g},${this.b})`
    }
  }
}
</script>
<style scoped>
.colorBox {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
}
</style>
